<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态移动图片</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .video {
            position: absolute;
            top: 45%;
            left: 48%;
            width: 125%;
            height: 120%;
            object-fit: cover;
            transform: translate(-50%, -50%);
            transition: transform 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="container">
        <video src="https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.mp4" class="video" muted="muted" loop="loop" autoplay="autoplay" x5-video-player-type="h5" width="985px" height="555px"></video>
    </div>

    <script>
        const container = document.querySelector('.container');
        const image = document.querySelector('.video');
        const containerWidth = container.offsetWidth;
        const containerHeight = container.offsetHeight;

        container.addEventListener('mousemove', (event) => {
            const mouseX = event.clientX - (containerWidth / 2);
            const mouseY = event.clientY - (containerHeight / 2);

            // 计算鼠标移动的比例（范围为-1到1）
            const moveX = (mouseX / containerWidth) * 0.5;
            const moveY = (mouseY / containerHeight) * 0.5;

            // 根据比例计算图片的移动距离
            const translateX = -(moveX * (containerWidth / 4)) - (image.offsetWidth / 2);
            const translateY = -(moveY * (containerHeight / 4)) - (image.offsetHeight / 2);

            image.style.transform = `translate(${translateX}px, ${translateY}px)`;
        });
    </script>
</body>

</html>